<template>
  <view class="inspection-container">
    <!-- 头部信息 -->
    <view class="header-section">
      <view class="header-title">
        <uni-icons type="scan" size="24" color="#faad14"></uni-icons>
        <text class="title-text">货物抽检</text>
      </view>
      <view class="header-desc">请对以下商品进行抽检，并上传检验结果</view>
    </view>

    <!-- 预约信息卡片 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">预约信息</text>
        <view class="status-badge warning">需抽检</view>
      </view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">预约编号</text>
          <text class="info-value">{{ appointmentInfo.applyNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">商户名称</text>
          <text class="info-value">{{ appointmentInfo.merchantName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">车辆号码</text>
          <text class="info-value">{{ appointmentInfo.vehicleNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预约时间</text>
          <text class="info-value">{{ formatDateTime(appointmentInfo.entryTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 商品抽检列表 -->
    <view class="goods-section">
      <view class="section-header">
        <text class="section-title">商品抽检清单</text>
        <text class="section-tip">请选择需要抽检的商品</text>
      </view>
      
      <view class="goods-list">
        <view 
          class="goods-item" 
          v-for="(item, index) in goodsList" 
          :key="index"
          :class="{ 'selected': item.selected, 'inspected': item.inspectionResult }"
        >
          <!-- 商品选择 -->
          <view class="goods-select" @click="toggleGoodsSelection(index)">
            <view class="checkbox-wrapper">
              <view class="checkbox" :class="{ 'checked': item.selected }">
                <uni-icons v-if="item.selected" type="checkmarkempty" size="16" color="#fff"></uni-icons>
              </view>
            </view>
            
            <view class="goods-info">
              <view class="goods-name">{{ item.goodsName }}</view>
              <view class="goods-detail">
                <text class="goods-quantity">数量: {{ item.quantity }}{{ item.unit || 'kg' }}</text>
                <text class="goods-supplier">{{ item.supplierName || '供货商' }}</text>
              </view>
            </view>
          </view>
          
          <!-- 抽检结果（已选择的商品显示） -->
          <view class="inspection-panel" v-if="item.selected">
            <view class="panel-divider"></view>
            
            <!-- 检验证书上传 -->
            <view class="upload-section">
              <view class="upload-label">
                <uni-icons type="medal" size="18" color="#1890ff"></uni-icons>
                <text class="label-text">检验证书</text>
              </view>
              
              <view class="upload-area" @click="uploadCertificate(index)">
                <image 
                  v-if="item.inspectionCertificate" 
                  :src="item.inspectionCertificate" 
                  mode="aspectFit"
                  class="certificate-image"
                ></image>
                <view v-else class="upload-placeholder">
                  <uni-icons type="camera" size="30" color="#999"></uni-icons>
                  <text class="upload-text">点击上传检验证书</text>
                </view>
              </view>
            </view>
            
            <!-- 检验结果选择 -->
            <view class="result-section">
              <view class="result-label">
                <uni-icons type="checkbox" size="18" color="#1890ff"></uni-icons>
                <text class="label-text">检验结果</text>
              </view>
              
              <view class="result-options">
                <view 
                  class="result-btn pass" 
                  :class="{ 'active': item.inspectionResult === 'pass' }"
                  @click="setInspectionResult(index, 'pass')"
                >
                  <uni-icons type="checkmarkempty" size="18" :color="item.inspectionResult === 'pass' ? '#fff' : '#52c41a'"></uni-icons>
                  <text>合格</text>
                </view>
                <view 
                  class="result-btn fail" 
                  :class="{ 'active': item.inspectionResult === 'fail' }"
                  @click="setInspectionResult(index, 'fail')"
                >
                  <uni-icons type="closeempty" size="18" :color="item.inspectionResult === 'fail' ? '#fff' : '#ff4d4f'"></uni-icons>
                  <text>不合格</text>
                </view>
              </view>
            </view>
            
            <!-- 备注输入 -->
            <view class="remark-section">
              <view class="remark-label">
                <uni-icons type="compose" size="18" color="#1890ff"></uni-icons>
                <text class="label-text">检验备注</text>
              </view>
              <textarea 
                class="remark-input"
                v-model="item.inspectionRemark"
                placeholder="请输入检验备注（选填）"
                maxlength="200"
              ></textarea>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 整体检验结论 -->
    <view class="conclusion-section">
      <view class="section-header">
        <text class="section-title">检验结论</text>
      </view>
      
      <view class="conclusion-options">
        <view 
          class="conclusion-item pass"
          :class="{ 'selected': overallConclusion === 'pass' }"
          @click="overallConclusion = 'pass'"
        >
          <view class="conclusion-icon">
            <uni-icons type="checkmarkempty" size="30" :color="overallConclusion === 'pass' ? '#52c41a' : '#999'"></uni-icons>
          </view>
          <text class="conclusion-text">检验合格</text>
          <text class="conclusion-desc">所有抽检商品符合标准</text>
        </view>
        
        <view 
          class="conclusion-item fail"
          :class="{ 'selected': overallConclusion === 'fail' }"
          @click="overallConclusion = 'fail'"
        >
          <view class="conclusion-icon">
            <uni-icons type="closeempty" size="30" :color="overallConclusion === 'fail' ? '#ff4d4f' : '#999'"></uni-icons>
          </view>
          <text class="conclusion-text">检验不合格</text>
          <text class="conclusion-desc">存在不符合标准的商品</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn cancel" @click="cancelInspection">
        <uni-icons type="back" size="20" color="#666"></uni-icons>
        <text class="btn-text">取消</text>
      </button>
      
      <button 
        class="action-btn transfer"
        @click="showTransferDialog"
      >
        <uni-icons type="paperplane-filled" size="20" color="#ff9800"></uni-icons>
        <text class="btn-text">转审核</text>
      </button>
      
      <button 
        class="action-btn submit" 
        :class="{ 'disabled': !canSubmit }"
        @click="submitInspection"
      >
        <uni-icons type="upload" size="20" color="#fff"></uni-icons>
        <text class="btn-text">提交结果</text>
      </button>
    </view>
    
    <!-- 转审原因弹窗 -->
    <uni-popup ref="transferPopup" type="center" :mask-click="false">
      <view class="transfer-dialog">
        <view class="dialog-header">
          <text class="dialog-title">转后台审核</text>
          <uni-icons type="close" size="24" color="#999" @click="closeTransferDialog"></uni-icons>
        </view>
        
        <view class="dialog-content">
          <view class="form-item">
            <text class="form-label required">转审原因</text>
            <textarea 
              class="form-textarea"
              v-model="transferReason"
              placeholder="请说明需要后台审核的原因（必填）"
              maxlength="500"
              :auto-height="true"
            />
            <text class="char-count">{{ transferReason.length }}/500</text>
          </view>
          
          <view class="tips">
            <uni-icons type="info-filled" size="16" color="#faad14"></uni-icons>
            <text class="tips-text">提交后将由食品安全管理人员进行复核处理</text>
          </view>
        </view>
        
        <view class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeTransferDialog">取消</button>
          <button 
            class="dialog-btn confirm" 
            :class="{ 'disabled': !transferReason.trim() }"
            @click="confirmTransfer"
          >确认转审</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getAppointment, submitInspection, transferToBackend } from '@/api/system/appointment.js'
import { getCurrentUserMarket } from '@/api/market'

export default {
  data() {
    return {
      // 当前市场信息
      currentMarketId: null,
      currentMarketName: null,
      applyId: '',
      applyNo: '',
      appointmentInfo: {
        applyNo: '',
        merchantName: '',
        vehicleNo: '',
        entryTime: ''
      },
      goodsList: [],
      overallConclusion: '', // 'pass' or 'fail'
      loading: false,
      transferReason: '' // 转审原因
    }
  },
  
  computed: {
    // 是否可以提交
    canSubmit() {
      // 至少选择一个商品进行检验
      const hasSelectedGoods = this.goodsList.some(item => item.selected)
      if (!hasSelectedGoods) return false
      
      // 所有选中的商品都必须有检验结果
      const selectedGoods = this.goodsList.filter(item => item.selected)
      const allHaveResult = selectedGoods.every(item => item.inspectionResult)
      if (!allHaveResult) return false
      
      // 必须选择整体结论
      return !!this.overallConclusion
    }
  },
  
  async onLoad(options) {
    // 从服务器获取当前用户的市场信息
    try {
      const res = await getCurrentUserMarket()
      if (res.code === 200 && res.data) {
        this.currentMarketId = res.data.deptId
        this.currentMarketName = res.data.deptName
      } else {
        uni.showModal({
          title: '提示',
          content: '您还未选择市场，请先选择市场后再进行抽检',
          showCancel: false,
          confirmText: '去选择',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/mine/market/index'
              })
            }
          }
        })
        return
      }
    } catch (error) {
      console.error('获取市场信息失败:', error)
      uni.showToast({
        title: '获取市场信息失败',
        icon: 'none'
      })
      return
    }
    
    this.applyId = options.applyId || ''
    this.applyNo = options.applyNo || ''
    
    if (!this.applyId) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      return
    }
    
    this.loadAppointmentDetail()
  },
  
  methods: {
    // 加载预约详情
    async loadAppointmentDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        const response = await getAppointment(this.applyId)
        
        if (response.code === 200) {
          this.appointmentInfo = response.data || {}
          
          // 处理商品列表
          const goodsList = response.data.goodsList || response.data.appointmentDetailList || []
          this.goodsList = goodsList.map(item => ({
            ...item,
            selected: false,
            inspectionResult: '', // 'pass' or 'fail'
            inspectionCertificate: '',
            inspectionRemark: ''
          }))
          
          // 如果只有一个商品，默认选中
          if (this.goodsList.length === 1) {
            this.goodsList[0].selected = true
          }
        }
      } catch (error) {
        console.error('加载预约详情失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 切换商品选择
    toggleGoodsSelection(index) {
      this.$set(this.goodsList[index], 'selected', !this.goodsList[index].selected)
    },
    
    // 设置检验结果
    setInspectionResult(index, result) {
      this.$set(this.goodsList[index], 'inspectionResult', result)
      
      // 自动更新整体结论
      this.updateOverallConclusion()
    },
    
    // 自动更新整体结论
    updateOverallConclusion() {
      const selectedGoods = this.goodsList.filter(item => item.selected && item.inspectionResult)
      if (selectedGoods.length === 0) return
      
      // 如果有任何不合格，整体结论为不合格
      const hasFailed = selectedGoods.some(item => item.inspectionResult === 'fail')
      if (hasFailed) {
        this.overallConclusion = 'fail'
      } else if (selectedGoods.every(item => item.inspectionResult === 'pass')) {
        this.overallConclusion = 'pass'
      }
    },
    
    // 上传检验证书
    uploadCertificate(index) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera', 'album'],
        success: async (res) => {
          const filePath = res.tempFilePaths[0]
          
          try {
            uni.showLoading({ title: '上传中...' })
            
            // 这里应该调用实际的上传接口
            const upload = (await import('@/utils/upload')).default
            const result = await upload({
              url: '/common/upload',
              filePath: filePath,
              name: 'file'
            })
            
            if (result.code === 200) {
              this.$set(this.goodsList[index], 'inspectionCertificate', result.url || filePath)
              uni.showToast({ title: '上传成功', icon: 'success' })
            }
          } catch (error) {
            console.error('上传失败:', error)
            // 暂时使用本地路径
            this.$set(this.goodsList[index], 'inspectionCertificate', filePath)
          } finally {
            uni.hideLoading()
          }
        }
      })
    },
    
    // 显示转审对话框
    showTransferDialog() {
      this.transferReason = ''
      this.$refs.transferPopup.open()
    },
    
    // 关闭转审对话框
    closeTransferDialog() {
      this.$refs.transferPopup.close()
      this.transferReason = ''
    },
    
    // 确认转审
    async confirmTransfer() {
      if (!this.transferReason.trim()) {
        uni.showToast({
          title: '请填写转审原因',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '确认转审',
        content: '确定要将该批货物转交后台审核吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '提交中...' })
              
              const response = await transferToBackend({
                applyId: this.applyId,
                transferReason: this.transferReason
              })
              
              uni.hideLoading()
              
              if (response.code === 200) {
                uni.showToast({
                  title: '转审成功',
                  icon: 'success'
                })
                
                this.closeTransferDialog()
                
                // 延迟返回
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 2
                  })
                }, 1500)
              } else {
                uni.showToast({
                  title: response.msg || '转审失败',
                  icon: 'none',
                  duration: 3000
                })
              }
            } catch (error) {
              uni.hideLoading()
              console.error('转审失败:', error)
              // request.js 已经处理并显示了错误消息
            }
          }
        }
      })
    },
    
    // 格式化日期时间
    formatDateTime(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    // 取消检验
    cancelInspection() {
      uni.showModal({
        title: '提示',
        content: '确定要取消本次抽检吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },
    
    // 提交检验结果
    async submitInspection() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完成所有必填项',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '确认提交',
        content: `确定提交检验结果为【${this.overallConclusion === 'pass' ? '合格' : '不合格'}】吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              this.loading = true
              uni.showLoading({ title: '提交中...' })
              
              // 构建提交数据
              const selectedGoods = this.goodsList.filter(item => item.selected)
              const submitData = {
                applyId: this.applyId,
                applyNo: this.applyNo,
                inspectionResult: this.overallConclusion,
                inspectionItems: selectedGoods.map(item => ({
                  goodsId: item.goodsId,
                  goodsName: item.goodsName,
                  inspectionResult: item.inspectionResult,
                  inspectionCertificate: item.inspectionCertificate,
                  inspectionRemark: item.inspectionRemark
                }))
              }
              
              const response = await submitInspection(submitData)
              
              if (response.code === 200) {
                uni.showToast({
                  title: '提交成功',
                  icon: 'success'
                })
                
                // 延迟返回
                setTimeout(() => {
                  // 返回到工作台（tabBar页面需要使用switchTab）
                  uni.switchTab({
                    url: '/pages/work/index'
                  })
                }, 1500)
              } else {
                // 显示具体的错误信息
                uni.showToast({
                  title: response.msg || '提交失败',
                  icon: 'none',
                  duration: 3000
                })
              }
            } catch (error) {
              console.error('提交检验结果失败:', error)
              // 不要覆盖已经显示的错误信息
              // request.js 已经处理并显示了错误消息
              // 这里只需要记录日志即可
            } finally {
              this.loading = false
              uni.hideLoading()
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.inspection-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.header-section {
  background: linear-gradient(135deg, #faad14, #ffc53d);
  color: #fff;
  padding: 40rpx 30rpx;
}

.header-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-text {
  margin-left: 15rpx;
  font-size: 36rpx;
  font-weight: bold;
}

.header-desc {
  font-size: 28rpx;
  opacity: 0.9;
}

.info-card {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: #fff;
}

.status-badge.warning {
  background-color: #faad14;
}

.info-list {
  /* 信息列表样式 */
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.goods-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.section-header {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-tip {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

.goods-list {
  /* 商品列表样式 */
}

.goods-item {
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.goods-item.selected {
  border-color: #1890ff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.15);
}

.goods-item.inspected {
  background-color: #f6ffed;
}

.goods-select {
  display: flex;
  align-items: center;
  padding: 30rpx;
}

.checkbox-wrapper {
  margin-right: 25rpx;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background-color: #1890ff;
  border-color: #1890ff;
}

.goods-info {
  flex: 1;
}

.goods-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.goods-detail {
  display: flex;
  gap: 30rpx;
}

.goods-quantity, .goods-supplier {
  font-size: 26rpx;
  color: #666;
}

.inspection-panel {
  padding: 0 30rpx 30rpx;
}

.panel-divider {
  height: 1rpx;
  background-color: #f0f0f0;
  margin: 0 -30rpx 30rpx;
}

.upload-section, .result-section, .remark-section {
  margin-bottom: 30rpx;
}

.upload-label, .result-label, .remark-label {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.label-text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.upload-area {
  border: 2rpx dashed #d9d9d9;
  border-radius: 8rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200rpx;
}

.certificate-image {
  width: 100%;
  height: 200rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}

.upload-text {
  font-size: 26rpx;
  color: #999;
}

.result-options {
  display: flex;
  gap: 20rpx;
}

.result-btn {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
  transition: all 0.3s ease;
}

.result-btn.pass {
  color: #52c41a;
  border-color: #52c41a;
}

.result-btn.pass.active {
  background-color: #52c41a;
  color: #fff;
}

.result-btn.fail {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.result-btn.fail.active {
  background-color: #ff4d4f;
  color: #fff;
}

.remark-input {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.conclusion-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.conclusion-options {
  display: flex;
  gap: 20rpx;
}

.conclusion-item {
  flex: 1;
  padding: 30rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.conclusion-item.selected {
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.conclusion-item.pass.selected {
  border-color: #52c41a;
  background-color: #f6ffed;
}

.conclusion-item.fail.selected {
  border-color: #ff4d4f;
  background-color: #fff1f0;
}

.conclusion-icon {
  margin-bottom: 15rpx;
}

.conclusion-text {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.conclusion-desc {
  font-size: 24rpx;
  color: #999;
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  gap: 15rpx;
  border-top: 2rpx solid #f0f0f0;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  min-width: 0; /* 允许按钮收缩 */
}

.action-btn.cancel {
  background-color: #fff;
  color: #666;
  border: 2rpx solid #d9d9d9;
  flex: 0.8; /* 取消按钮占用更少空间 */
}

.action-btn.transfer {
  background-color: #fff;
  color: #ff9800;
  border: 2rpx solid #ff9800;
  flex: 0.9; /* 转审核按钮占用较少空间 */
}

.action-btn.submit {
  background-color: #1890ff;
  color: #fff;
}

.action-btn.submit.disabled {
  background-color: #d9d9d9;
  color: #999;
}

.action-btn.transfer {
  background-color: #ff9800;
  color: #fff;
}

/* 转审弹窗样式 */
.transfer-dialog {
  background: #fff;
  border-radius: 16rpx;
  width: 600rpx;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.dialog-content {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.form-label.required::before {
  content: '*';
  color: #ff4d4f;
  margin-right: 8rpx;
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  font-size: 28rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.tips {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: #fff7e6;
  border-radius: 8rpx;
}

.tips-text {
  flex: 1;
  font-size: 24rpx;
  color: #8b6914;
  margin-left: 10rpx;
  line-height: 1.5;
}

.dialog-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.dialog-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 30rpx;
  border: none;
  background: transparent;
}

.dialog-btn.cancel {
  color: #666;
  border-right: 1rpx solid #f0f0f0;
}

.dialog-btn.confirm {
  color: #ff9800;
  font-weight: bold;
}

.dialog-btn.confirm.disabled {
  color: #ccc;
  pointer-events: none;
}

.btn-text {
  font-size: 26rpx;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 小屏幕适配 */
@media screen and (max-width: 375px) {
  .action-btn {
    font-size: 24rpx;
    gap: 6rpx;
  }
  
  .btn-text {
    font-size: 22rpx;
  }
  
  .action-buttons {
    gap: 10rpx;
    padding: 15rpx;
  }
}
</style>